<template>
  <div class="home-c">
    <div class="wrap-banner">
      <div class="banner-c">
        <div class="h4">
          <p class="zh">多维全景分析</p>
          <p class="en">MULTIDIMENSIONAL PANORAMIC ANALYSIS</p>
        </div>
        <div class="wrap-c">
          <!-- <div class="item">
              <div
                @click="handleChangePage({ router: 'DCMain', type: 'patent' })"
              >
                <img src="../../../assets/img/home-c-1.jpg" alt="" />
                <h4 class="f-title-6">专利库</h4>
              </div>
            </div> -->
          <div class="item">
            <div
              @click="handleChangePage({ router: 'Analysis', type: 'patent' })"
            >
              <img src="../../../assets/img/home-c-2.jpg" alt="" />
              <h4 class="f-title-6">专利分析</h4>
            </div>
          </div>
          <!-- <div class="item">
              <div
                @click="handleChangePage({ router: 'DCMain', type: 'paper' })"
              >
                <img src="../../../assets/img/home-c-3.jpg" alt="" />
                <h4 class="f-title-6">论文库</h4>
              </div>
            </div> -->
          <div class="item">
            <div
              @click="handleChangePage({ router: 'Analysis', type: 'paper' })"
            >
              <img src="../../../assets/img/home-c-4.jpg" alt="" />
              <h4 class="f-title-6">论文分析</h4>
            </div>
          </div>
          <!-- <div class="item">
              <div
                @click="
                  handleChangePage({ router: 'technologyFrontier', type: '' })
                "
              >
                <img src="../../../assets/img/home-c-5.jpg" alt="" />
                <h4 class="f-title-6">技术前沿领域 <br />交叉分析</h4>
              </div>
            </div> -->
          <div class="item">
            <div
              @click="
                handleChangePage({
                  router: 'technologyTopicTrends',
                  type: '',
                })
              "
            >
              <img src="../../../assets/img/home-c-6.jpg" alt="" />
              <h4 class="f-title-6">热点前沿交叉分析</h4>
            </div>
          </div>
          <div class="item">
            <div
              @click="
                handleChangePage({ router: 'technologyMaturity', type: '' })
              "
            >
              <img src="../../../assets/img/home-c-7.png" alt="" />
              <h4 class="f-title-6">技术成熟度分析</h4>
            </div>
          </div>
          <!-- <div class="item">
            <div>
              <img src="../../../assets/img/home-c-8.png" alt="">
              <h4 class="f-title-6">专利检索</h4>
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="panel2">
      <div class="container">
        <h4>
          <p class="zh">科技大数据中心</p>
          <p class="en">SCIENCE AND TECHNOLOGY CENTER FOR BIG DATA</p>
        </h4>
        <dl class="data-amount-r">
          <dd v-for="(item, index) in dataAmountData" :key="index">
            <div class="l">
              <img
                v-if="index == 0"
                src="../../../assets/img/home-c-zl.png"
                alt=""
              />
              <img
                v-if="index == 1"
                src="../../../assets/img/home-c-lw.png"
                alt=""
              />
              <img
                v-if="index == 2"
                src="../../../assets/img/home-c-fm.png"
                alt=""
              />
              <img
                v-if="index == 3"
                src="../../../assets/img/home-c-bz.png"
                alt=""
              />
              <img
                v-if="index == 4"
                src="../../../assets/img/home-cqy.png"
                alt=""
              />
              <img
                v-if="index == 6"
                src="../../../assets/img/home-c-cy.png"
                alt=""
              />
              <!-- <img
                  v-if="index == 5"
                  src="../../../assets/img/home-c-gs.png"
                  alt=""
                /> -->
              <img
                v-if="index == 5"
                src="../../../assets/img/home-c-zj.png"
                alt=""
              />
              <!-- <img
                  v-if="index == 7"
                  src="../../../assets/img/home-c-cy.png"
                  alt=""
                /> -->
              <img
                v-if="index == 7"
                src="../../../assets/img/home-c-zx.png"
                alt=""
              />
            </div>
            <div class="r">
              <h5>{{ item.name }}</h5>
              <p>
                <span>{{ item.amount }}</span
                ><i>{{ item.unit }}+</i>
              </p>
            </div>
          </dd>
        </dl>
        <p class="abst-r">
          大数据中心拥有4550万+数据量，其中包括基础知识库专利数据4290万+、论文数据260万+。
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      categoryOptions: [],
      dataAmountData: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.dataAmountData = [
        { name: "专利数据", amount: "4290", unit: "万" },
        { name: "论文数据", amount: "260", unit: "万" },
      ];
      this.categoryOptions = [
        {
          label: "专利分析",
          icon: "icon-chanyefenxi",
          router: "Analysis",
          type: "patent",
          style: { "font-size": ".4rem" },
        },
        {
          label: "论文分析",
          icon: "icon-chanyefenxi",
          router: "Analysis",
          type: "paper",
          style: { "font-size": ".4rem" },
        },
        {
          label: "技术主题<br>趋势分析",
          icon: "icon-chanyefenxi",
          router: "technologyTopicTrends",
          style: { "font-size": ".4rem" },
        },
        {
          label: "技术领域<br>交叉分析",
          icon: "icon-chanyefenxi",
          router: "technologyFrontier",
          style: { "font-size": ".4rem" },
        },
        {
          label: "技术成熟<br>度分析",
          icon: "icon-chanyefenxi",
          router: "technologyMaturity",
          style: { "font-size": ".4rem" },
        },
      ];
    },
    // 页面跳转
    handleChangePage(item) {
      this.$router.push({
        name: item.router,
        query: {
          type: item.type,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.home-c {
  position: relative;
  .wrap-banner {
    background: #191f4b;
  }
  .banner-c {
    padding: 30px;
    width: 14rem;
    padding-right: 0;
    padding-left: 0;
    margin: 0 auto;
    position: relative;
    padding: 1rem 0 2rem;

    .h4 {
      position: relative;
      width: 100%;
      height: 0.56rem;
      margin-bottom: 0.6rem;
      text-align: center;
      p {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        // font-family: SourceHanSansCN-Bold;
        font-weight: normal;
        text-align: center;
      }
      .zh {
        z-index: 2;
        line-height: 0.57rem;
        margin-top: 0.22rem;
        font-size: 0.3rem;
        color: $color107;
      }
      .en {
        z-index: 1;
        line-height: 0.56rem;
        font-size: 0.53rem;
        text-transform: uppercase;
        color: rgba(146, 143, 154, 0.4);
      }
    }
    .wrap-c {
      display: grid;
      margin-right: 0;
      margin-left: 0;
      grid-template-columns: repeat(4, 1fr);
      grid-column-gap: 32px;
      grid-row-gap: 32px;
    }
    .item {
      width: auto;
      min-width: auto;
      display: flex;
      cursor: pointer;
      div {
        display: block;
        position: relative;
        width: 100%;
        min-height: 2.4rem;
        padding: 21px 24px;
        border-radius: 8px;
        background: #000;
        color: #fff;
        text-decoration: none;
        overflow: hidden;
        border: 1px solid #646464;
        h4 {
          position: absolute;
          top: 0px;
          right: 0;
          left: 0;
          z-index: 1;
          font-size: 0.28rem;
          padding-left: 10px;
          background: rgba($color: #000000, $alpha: 0.4);
        }
        img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          transition: opacity 0.8s ease 0.3s;
          z-index: 0;
          object-fit: cover;
          object-position: center center;
          opacity: 0.9;
        }
      }
    }
  }

  .panel2 {
    position: relative;
    background-color: #191f4b;
    width: 100%;
    height: 4rem;

    .container {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      width: 100%;
      height: 6rem;
      padding: 0 2.8rem;
      box-sizing: border-box;
      h4 {
        position: relative;
        width: 100%;
        height: 0.56rem;
        margin-bottom: 0.3rem;
        text-align: center;
        p {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          // font-family: SourceHanSansCN-Bold;
          font-weight: normal;
          text-align: center;
        }
        .zh {
          z-index: 2;
          line-height: 0.57rem;
          margin-top: 0.22rem;
          font-size: 0.3rem;
          color: $color107;
        }
        .en {
          z-index: 1;
          line-height: 0.56rem;
          font-size: 0.53rem;
          text-transform: uppercase;
          color: rgba(146, 143, 152, 0.4);
        }
      }
      .abst-r {
        position: absolute;
        top: 2rem;
        right: 16.1%;
        width: 17%;
        line-height: 0.38rem;
        // font-family: SourceHanSansCN-Light;
        font-size: 0.2rem;
        letter-spacing: 1px;
        color: $color31;
        &:before {
          position: absolute;
          bottom: -0.1rem;
          right: 0.1rem;
          width: 0.34rem;
          height: 0.05rem;
          content: "";
          background-color: $mainColor;
        }
      }
      .data-amount-r {
        position: absolute;
        top: 2rem;
        right: 36.4%;
        display: flex;
        flex-wrap: wrap;
        width: 52%;
        dd {
          width: 33.3333%;
          margin-bottom: 6.8%;
          display: flex;
          .l {
            width: 50%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            img {
              width: 50px;
            }
          }
          .r {
            width: 50%;
            h5 {
              line-height: 0.3341rem;
              padding-left: 17%;
              // font-family: SourceHanSansCN-Light;
              font-size: 0.18rem;
              color: $color109;
            }
            p {
              line-height: 0.3341rem;
              padding-left: 17%;
              color: $mainColor;
              span {
                display: inline-block;
                font-size: 0.38rem;
                vertical-align: middle;
              }
              i {
                display: inline-block;
                font-size: 0.23rem;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }
}
</style>
